<!--
* @FileDescription: 曲线图表symbol点弹框组件
* @Author: yuec621@outlook.com
* @Date: 2024-11-12 12:31:08
* @LastEditors: Please set LastEditors
* @LastEditTime: 2024-12-30 12:31:08
-->
<template>
    <div class="symbolBox">
        <div class="sy_title">
            <span>{{ symbolObj.pointId }}{{ symbolObj.pointName }}</span>
            <span class="sy_place">{{  symbolObj.place }}</span>
        </div>
        <div class="sy_date">
            <el-date-picker disabled style="width: 320px;" size="small" v-model="symbolObj.timeRange" type="datetimerange"
                range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" />
            <el-button class="sy_btn" type="text" @click="toRouterClick">查看密采曲线</el-button>
        </div>
        <div class="sy_list">
            <el-row :gutter="24">
                <el-col :span="index%2?15:9" class="sy_box" v-for="(item,index) in symbolObj.list">
                    <div>
                        <span class="sy_left">{{ item.label }}</span>
                        <span class="sy_right"><em :class="item.state">{{ item.value }}</em>{{ item.unit }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>
</template>
<script setup>
    import {
        computed,
        reactive,
        watchEffect
    } from 'vue';
    import axios from "@/utils/request"
    import {
        searchchannelNoList
    } from '@/api/config'
    import useUserStore from "@/store/modules/user";
    const {
        proxy
    } = getCurrentInstance();
    const userStore = useUserStore();
    const router = useRouter();
    const props = defineProps({
        symbolObj: {
            type: Object,
            default: () => {
                return {
                    pointId: '012A03',
                    pointName: '一氧化碳',
                    place: '05采煤工作面回风巷105米处',
                    timeRange:[],
                    list: [{
                            label: '最大值',
                            value: 8,
                            unit: 'ppm',
                            state: 'red'
                        },
                        {
                            label: '最大值时刻',
                            unit: '2024-10-11 16:1:12',
                        }, {
                            label: '最小值',
                            value: 8,
                            unit: 'ppm',
                            state: 'blue'
                        }, {
                            label: '平均值',
                            value: 8,
                            unit: 'ppm',
                            state: 'blue'
                        }, {
                            label: '报警',
                            value: 8,
                            unit: 'ppm',
                            state: 'blue'
                        },
                        {
                            label: '累计时长',
                            unit: '12分钟22秒',
                            state: ''
                        },
                        {
                            label: '断电',
                            value: 8,
                            unit: 'ppm',
                            state: 'blue'
                        }, {
                            label: '累计时长',
                            unit: '12分钟22秒',
                            state: ''
                        }, {
                            label: '馈电异常',
                            value: 8,
                            unit: 'ppm',
                            state: 'blue'
                        }, {
                            label: '累计时长',
                            unit: '12分钟22秒',
                            state: ''
                        },
                    ]
                }
            }

        }
    })
    // 重点
    const state = reactive({
        toolType: undefined
    })

    function toRouterClick(type) {
        router.push({name:'Qx_micaiChart'})
    }
</script>
<style lang="scss" scoped>
    :deep(.el-input__wrapper) {
        background: transparent !important;
    }

    :deep(.el-date-editor.el-input__wrapper) {
        box-shadow: none;
    }

    .symbolBox {
        border: 1px solid rgba(64, 159, 255, .1);
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.9);
        box-shadow: 0px 2px 12px rgba(33, 49, 66, 0.08);
        backdrop-filter: blur(4px);
        font-size: 14px;
        padding: 16px;
        min-width: 414px;
        max-width: 460px;
        .sy_title {
            font-weight: 700;
            color: rgba(62, 70, 79, 1);

            .sy_place {
                margin-left: 10px;
            }
        }

        .sy_date {
            margin-top: 10px;
            border-radius: 4px;
            background: rgba(91, 109, 128, 0.08);

            .sy_btn {
                margin-left: 10px;
            }
        }

        .sy_list {
            margin-top: 10px;
            display: flex;
            flex-wrap: wrap;

            .sy_box {
                margin-bottom: 8px;

                .sy_left {
                    color: rgba(62, 70, 79, 0.6);
                }

                .sy_right {
                    color: rgba(62, 70, 79, 1);
                    font-weight: 400;

                    em {
                        font-style: normal;
                        font-weight: 700;
                        margin-left: 10px;
                        margin-right: 10px;

                        &.blue {
                            color: rgba(64, 158, 255, 1);
                        }

                        &.red {
                            color: rgba(245, 108, 108, 1);
                        }
                    }
                }
            }
        }
    }
</style>